<template>
  <div class="my-center">
    <div class="main">
      <div class="header">
        <div class="left">
          <div><img src="@/static/images/common/avatar.jpg" alt="" /></div>
          <p>{{ userName }}</p>
        </div>
        <div class="right">绑定邮箱：1234567@163.com</div>
      </div>
      <div class="content">
        <ul>
          <li>
            <img src="@/static/images/personal/my-center01.png" alt="" />
            <div>
              <p>待支付的订单：<span>0</span></p>
              <p>查看待支付订单</p>
            </div>
          </li>
          <li>
            <img src="@/static/images/personal/my-center02.png" alt="" />
            <div>
              <p>待收获的订单：<span>0</span></p>
              <p>查看待收获订单</p>
            </div>
          </li>
          <li>
            <img src="@/static/images/personal/my-center03.png" alt="" />
            <div>
              <p>待评价的订单：<span>0</span></p>
              <p>查看待评价订单</p>
            </div>
          </li>
          <li>
            <img src="@/static/images/personal/my-center04.png" alt="" />
            <div>
              <p>喜欢的商品：<span>0</span></p>
              <p>查看喜欢的</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const userName = 'admin';
    return {
      userName,
    };
  },
});
</script>

<style lang="scss" scoped>
.my-center {
  width: 100%;
  height: 546px;
  border: 1px solid #ddd;

  .main {
    width: 888px;
    margin: 0 auto;

    .header {
      display: flex;
      justify-content: space-between;
      padding-top: 62px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
      .left {
        display: flex;
        div {
          width: 98px;
          height: 98px;
          border-radius: 50%;
          border: 1px solid #ddd;
          padding: 1px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        p {
          margin-top: 10px;
          margin-left: 10px;
          font-weight: 700;
        }
      }
      .right {
        line-height: 98px;
      }
    }

    .content {
      height: 368px;
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        li {
          width: 50%;
          display: flex;
          div {
            margin-left: 10px;
            margin-top: 10px;
            color: #666666;
            font-size: 14px;

            span {
              color: red;
            }
            p {
              margin-bottom: 8px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
